<script setup lang="ts" name="WebColor">
import MenuBar from '@/views/components/menuBar/index.vue'
import SvgIcon from '@/components/SvgIcon/index.vue';
import colors from './json/color-1.json'
import impressionColors from './json/color-2.json'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
/*========================================>( 模型属性 )<========================================*/
//菜单索引
const menuIndex = ref<string>('0')
//转换的form
const transForm = ref<{ [key: string]: any }>({
    color16: undefined,
    colorRgb: undefined,
    reverseColor16: undefined,
    reverseColorRgb: undefined
})
/*========================================>( 作用域属性 )<========================================*/
//菜单列表
const _menus = [{
    name: '网页常用颜色',
    icon: 'color'
}, {
    name: '网页印象颜色',
    icon: 'color-fill'
}, {
    name: '转化RGB',
    icon: 'change'
}, {
    name: '色彩搭配推荐',
    icon: 'book'
}]

// const _colors:any = await import('./json/color-1.json')
// const _impressionColors:any = await fetch('./json/color-2.json')

const _collocation = [
    ['1.jpg', '2.jpg', '3.jpg'],
    ['4.jpg', '5.jpg', '6.jpg'],
    ['7.jpg', '8.jpg', '9.jpg'],
]

/*========================================>( dom属性 )<========================================*/
const domTransForm = ref()

/*========================================>( 普通方法 )<========================================*/
const handleFunc = (index: number) => {
    menuIndex.value = index + ''
}

//监听颜色被点击
const handleColorPicked = (color: string) => {
    //复制到剪贴板
    window.ipcRenderer.send('GENERAL-CLIPBOARD', { type: 'text', value: color })
    proxy?.$modal.msgSuccess("已复制到剪贴板");
}

//滚动到指定文位置
const scrollToDiv = (index: number) => {
    var element = document.getElementById("unit" + index);
    element?.scrollIntoView({ behavior: "smooth" });
}

//监听开始颜色转化
const handleTranslate = () => {
    domTransForm.value.validate((valid: boolean) => {
        if (valid) {
            let sanitizedHex = transForm.value.color16.replace("#", "");
            // 解析红、绿、蓝各自的十六进制数
            if (sanitizedHex.length == 3) {
                sanitizedHex += sanitizedHex
            }
            let red = parseInt(sanitizedHex.substring(0, 2), 16);
            let green = parseInt(sanitizedHex.substring(2, 4), 16);
            let blue = parseInt(sanitizedHex.substring(4, 6), 16);
            transForm.value.colorRgb = `rgb(${red}, ${green}, ${blue})`;
            let redReverse = 255 - red
            let greenReverse = 255 - green
            let blueReverse = 255 - blue
            transForm.value.reverseColorRgb = `rgb(${redReverse}, ${greenReverse}, ${blueReverse})`;
            transForm.value.reverseColor16 = `#${((1 << 24) + (redReverse << 16) + (greenReverse << 8) + blueReverse).toString(16).slice(1)}`;
        }
    })
}

/*========================================>( 钩子 )<========================================*/
// document.title = '网页常用颜色'

</script>
<template>
    <MenuBar title="网页常用颜色" mid="ModuleWebColor"/>
    <div class="main-content web-color">
        <el-container class="main">
            <el-aside width="200px" class="main-menu">
                <el-menu default-active="0" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
                    active-text-color="#ffd04b">
                    <el-menu-item v-for="item, index in _menus" :index="index.toString()" :key="item.name"
                        @click="handleFunc(index)">
                        <svg-icon :icon-class="item.icon" width="22" height="22" class="p-r-0-2" />
                        <template #title>{{ item.name }}</template>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main class="tab-content">
                <template v-if="menuIndex == '0'">
                    <el-container>
                        <el-main>
                            <div class="unit" v-for="unit, index in colors" :key="unit.name" :id="'unit' + index">
                                <div class="title">{{ unit.name }} <i class="el-icon-caret-bottom"></i></div>
                                <div class="group" v-for="group, gindex in unit.list" :key="gindex">
                                    <div class="colorpad" v-for="color in group" :key="color"
                                        @click="handleColorPicked(color)">
                                        <div class="color" :style="{ backgroundColor: color }"></div>
                                        <div class="value">{{ color }}</div>
                                    </div>
                                </div>
                            </div>
                            <div style="height:100px;"></div>
                        </el-main>
                        <el-aside width="260px" class="bindex">
                            <div class="title"><i class="el-icon-collection"></i>索引</div>
                            <div class="pad" v-for="unit, index in colors" :key="index" @click="scrollToDiv(index)"><i
                                    class="el-icon-caret-left"></i> {{ unit.name }}</div>
                        </el-aside>
                    </el-container>
                </template>
                <template v-if="menuIndex == '1'">
                    <el-container>
                        <el-main>
                            <div class="unit" v-for="unit, index in impressionColors" :key="unit.name"
                                :id="'unit' + index">
                                <div class="title">{{ unit.name }} <i class="el-icon-caret-bottom"></i></div>
                                <div class="group" v-for="group, gindex in unit.list" :key="gindex">
                                    <div class="colorpad" v-for="color in group" :key="color"
                                        @click="handleColorPicked(color)">
                                        <div class="color" :style="{ backgroundColor: color }"></div>
                                        <div class="value">{{ color }}</div>
                                    </div>
                                </div>
                            </div>
                            <div style="height:100px;"></div>
                        </el-main>
                        <el-aside width="260px" class="bindex">
                            <div class="title"><i class="el-icon-collection"></i>索引</div>
                            <div class="pad" v-for="unit, index in impressionColors" :key="index"
                                @click="scrollToDiv(index)"><i class="el-icon-caret-left"></i> {{ unit.name }}</div>
                        </el-aside>
                    </el-container>
                </template>
                <template v-if="menuIndex == '2'">
                    <el-form :model="transForm" ref="domTransForm" label-width="120px">
                        <el-form-item label="16进制颜色码"
                            :rules="[{ required: true, message: '颜色值不能为空' }, { pattern: /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/, message: '不合法的16进制颜色表达式' }]"
                            prop="color16">
                            <el-row class="rw-100">
                                <el-col :span="18">
                                    <el-input v-model="transForm.color16" placeholder="请输入16进制颜色码"></el-input>
                                </el-col>
                                <el-col :span="6">
                                    <el-button type="primary" style="margin-left:10px"
                                        @click="handleTranslate">转化</el-button>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item label="rgb颜色码">
                            <el-row class="rw-100">
                                <el-col :span="18">
                                    <el-input v-model="transForm.colorRgb" placeholder="未生成" readonly></el-input>
                                </el-col>
                                <el-col :span="6">
                                    <div v-if="transForm.colorRgb" class="colorRgb"
                                        :style="{ backgroundColor: transForm.colorRgb, color: transForm.reverseColor16 }"
                                        @click="handleColorPicked(transForm.colorRgb)"><i
                                            class="el-icon-copy-document"></i>复制</div>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item label="16进制反色">
                            <el-row class="rw-100">
                                <el-col :span="18">
                                    <el-input v-model="transForm.reverseColor16" placeholder="未生成" readonly></el-input>
                                </el-col>
                                <el-col :span="6">
                                    <div v-if="transForm.reverseColor16" class="colorRgb"
                                        :style="{ backgroundColor: transForm.reverseColor16, color: transForm.colorRgb }"
                                        @click="handleColorPicked(transForm.reverseColor16)"><i
                                            class="el-icon-copy-document"></i>复制</div>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item label="rgb反色">
                            <el-row class="rw-100">
                                <el-col :span="18">
                                    <el-input v-model="transForm.reverseColorRgb" placeholder="未生成" readonly></el-input>
                                </el-col>
                                <el-col :span="6">
                                    <div v-if="transForm.reverseColorRgb" class="colorRgb"
                                        :style="{ backgroundColor: transForm.reverseColorRgb, color: transForm.colorRgb }"
                                        @click="handleColorPicked(transForm.reverseColorRgb)"><i
                                            class="el-icon-copy-document"></i>复制</div>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-form>
                </template>
                <template v-if="menuIndex == '3'">
                    <el-row v-for="group, index in _collocation" :key="index">
                        <el-col :span="8" v-for="item in group" :key="item">
                            <el-image style="width: 98%;border:solid 1px #3d3d3d;display:block;margin:5px auto"
                                :src="'/images/collocation/' + item"></el-image>
                        </el-col>
                    </el-row>
                </template>
            </el-main>
        </el-container>
    </div>
</template>
<style lang="scss">
.main-content.web-color {
    width: 100%;
    height: calc(100% - 40px);

    .el-container.main {
        width: 100%;
        height: 100%;

        .main-menu {
            height: 100%;
            background-color: #545C64;

            .el-menu {
                border-right: none;
            }
        }

        .tab-content {
            height: 100%;

            .el-container {
                height: 100%;

                .unit {
                    width: 900px;
                    margin: 0 auto;
                    display: table;

                    .title {
                        font-weight: bold;
                        padding: 15px 0;
                        text-align: center;
                        font-size: 24px;
                        background-color: #3d3d3d;
                        color: #c2c2c2;
                        margin-bottom: 20px;
                    }

                    .group {
                        float: left;
                        margin-left: 20px;
                        margin-bottom: 10px;
                        padding-bottom: 20px;

                        .colorpad {
                            margin-top: 3px;
                            margin-right: 8px;
                            display: table;
                            float: left;
                            cursor: pointer;

                            .color {
                                width: 80px;
                                height: 80px;
                                border: solid 1px #fff;
                            }

                            .value {
                                width: 80px;
                                text-align: center;
                            }
                        }

                    }
                }

                .bindex {
                    border-left: solid 1px #e1e1e1;
                    height: 100%;

                    .title {
                        text-align: center;
                        font-size: 22px;
                        font-weight: bold;
                        margin: 25px 0;
                        color: #666;
                    }

                    .pad {
                        width: 90%;
                        height: 40px;
                        line-height: 40px;
                        text-align: center;
                        margin: 5px auto;
                        cursor: pointer;
                        background-color: #ccc;
                        color: #333333;
                        font-weight: bold;

                        &:hover {
                            background-color: #3d3d3d;
                            color: #ccc;
                        }
                    }
                }
            }

            .colorRgb {
                width: 80px;
                height: 40px;
                background-color: #fff;
                margin-left: 10px;
                color: #fff;
                text-align: center;
                cursor: pointer;
                font-weight: bold;
            }

        }

    }
}
</style>
<style lang="scss" scoped></style>